<template>
	<view class="sti_result_page" v-if="showResultPage">
		<view class="audit_img_box">
			<image v-if="info.status==0" class="audit_img" :src="onlinePic+'audit_ing.png'">
			</image>
			<image v-if="info.status==1" class="audit_img" :src="onlinePic+'audit_ok.png'">
			</image>
			<image v-if="info.status==2" class="audit_img" :src="onlinePic+'audit_no.png'">
			</image>
		</view>
		<view class="f-18 text-c mt-15">
			<text>{{info.status_text}}</text>
		</view>
		<view v-if="info.status==1" class="submit_btn_block mt-20" @click="goQrCode">查看我的权益</view>
		<view v-else :class="status==2?'audit_text_no':'audit_text'">
			<text>{{info.refuse_reason}}</text>
		</view>
		<view class="result_info_box">
			<view class="result_info_cell display_flex">
				<view class="result_info_title">经销商</view>
				<view class="f-13 flex-1">{{info.company_title}}</view>
			</view>
			<view class="result_info_cell display_flex">
				<view class="result_info_title">手机号</view>
				<view class="f-13 flex-1">{{info.mobile}}</view>
			</view>
			<view class="result_info_cell">
				<view class="result_info_title">销售合同</view>
				<view class="mt-5">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.contract" :key="index" :span="6">
							<view class="upload_img_box">
								<view class="upload_img_mask">
									<image v-if="info.contract_status==0" class="upload_audit"
										:src="onlinePic+'audit.png'" mode="aspectFill"></image>
									<image v-if="info.contract_status==1" class="upload_audit"
										:src="onlinePic+'pass.png'" mode="aspectFill"></image>
									<image v-if="info.contract_status==2" class="upload_audit"
										:src="onlinePic+'nopass.png'" mode="aspectFill"></image>
								</view>
								<image class="upload_img" :src="picUrl+item" mode="aspectFill"></image>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="result_info_cell">
				<view class="result_info_title">定金收据</view>
				<view class="mt-5">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.invoice" :key="index" :span="12">
							<view class="upload_img_box">
								<view class="upload_img_mask">
									<image v-if="info.invoice_status==0" class="upload_audit"
										:src="onlinePic+'audit.png'" mode="aspectFill"></image>
									<image v-if="info.invoice_status==1" class="upload_audit"
										:src="onlinePic+'pass.png'" mode="aspectFill"></image>
									<image v-if="info.invoice_status==2" class="upload_audit"
										:src="onlinePic+'nopass.png'" mode="aspectFill"></image>
								</view>
								<image class="upload_img" :src="picUrl+item" mode="aspectFill"></image>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="result_info_cell">
				<view class="result_info_title">身份证信息</view>
				<view class="mt-5">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in info.card_photo" :key="index" :span="12">
							<view class="upload_img_box">
								<view class="upload_img_mask">
									<image v-if="info.card_photo_status==0" class="upload_audit"
										:src="onlinePic+'audit.png'" mode="aspectFill"></image>
									<image v-if="info.card_photo_status==1" class="upload_audit"
										:src="onlinePic+'pass.png'" mode="aspectFill"></image>
									<image v-if="info.card_photo_status==2" class="upload_audit"
										:src="onlinePic+'nopass.png'" mode="aspectFill"></image>
								</view>
								<image class="upload_img" :src="picUrl+item" mode="aspectFill"></image>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<view v-if="info.status==0" class="mt-25 submit_btn_block" @click="updateForm">重新提交</view>
		<view v-if="info.status==2">
			<view v-if="info.update_number>0" class="mt-25 submit_btn_block" @click="updateForm">重新提交</view>
			<view v-else class="mt-25 submit_btn_block" style="background-color: #E5BAC8;">重新提交</view>
			<view :class="info.update_number>0?'edit_nums':'edit_nums c-C80F48'">信息修改次数剩余{{info.update_number}}次</view>
		</view>
		<image v-if="info.bottom_img" class="sti_form_bottom_img" :src="picUrl+info.bottom_img" mode="widthFix"></image>
		<view class=""></view>
	</view>
</template>

<script>
	import {
		getStiActiveInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				nums: 2,
				showResultPage: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom + 80,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				uni.showLoading({})
				this.getStiActiveInfo()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad() {
			if (uni.getStorageSync('access_token')) {
				uni.showLoading({})
				this.getStiActiveInfo()
			}
			var params = {
				event_code: 'sti宠粉活动',
				path: 'pages/sti/result',
				event_id: '',
				title: '',
				source_page: 'sti宠粉活动-审核结果',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getStiActiveInfo() {
				getStiActiveInfo({
					huodong_version:2
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						if (res.data.info.is_enroll == 0) {
							uni.navigateTo({
								url: '/pages/sti/index'
							})
						}
						this.showResultPage = true
						uni.hideLoading()
						//is_enroll:,   是否提交  0 未提交  1 已提交
					} else {}
				})
			},
			updateForm() {
				uni.reLaunch({
					url: '/pages/sti/form'
				})
			},
			goQrCode() {
				uni.navigateTo({
					url: '/pages/sti/qrcode'
				})
			}
		},
		onPullDownRefresh() {
			this.getStiActiveInfo()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEEEEE;
	}

	.sti_result_page {
		padding: 47rpx 47rpx 248rpx 47rpx;
		min-height: 100vh;
		position: relative;

		.audit_img_box {
			margin-top: 35rpx;
			text-align: center;

			.audit_img {
				width: 285rpx;
				height: 201rpx;
			}
		}

		.audit_text {
			color: #999999;
			font-size: 24rpx;
			text-align: center;
			margin-top: 20rpx;
		}

		.audit_text_no {
			color: #E02E2E;
			font-size: 24rpx;
			text-align: center;
			margin-top: 20rpx;
		}

		.result_info_box {
			margin-top: 50rpx;
			padding: 10rpx 30rpx 40rpx 30rpx;
			border-radius: 8rpx;
			background-color: #ffffff;

			.result_info_cell {
				padding: 40rpx 0;
				border-bottom: 1rpx solid #E9E9E9;

				.result_info_title {
					width: 110rpx;
					color: #999999;
					font-size: 22rpx;
				}

				.upload_img_box {
					width: 100%;
					height: 168rpx;
					margin-top: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: #F2F2F2;
				}

				.upload_img {
					width: 100%;
					height: 168rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_img_box {
					width: 285rpx;
					height: 200rpx;
					margin-bottom: 20rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
				}

				.card_img {
					position: absolute;
					z-index: 2;
					width: 285rpx;
					height: 200rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.card_text {
					position: absolute;
					z-index: 2;
					text-align: center;
				}

				.upload_img_mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: rgba(0, 0, 0, .6);
				}

				.upload_audit {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.result_info_cell:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}
		}

		.submit_btn_block {
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 110rpx;
			color: #ffffff;
			border-radius: 8rpx;
			background-color: #C80F48;
		}

		.edit_nums {
			font-size: 20rpx;
			margin-top: 10rpx;
			text-align: center;
		}

		.c-C80F48 {
			color: #C80F48;
		}

		.sti_form_bottom_img {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}
	}
</style>